<template>
  <div>
    <Form ref="queryForm" :model="dataToQuery" :label-width="120">
      <Row v-show="!switchFlag" class="query-form" >
        <i-col span="8">
          <FormItem label="问题类型：">
            <Select class="query-form-el" placeholder="请选择事件类型" type='text' v-model='dataToQuery.problemType'>
              <Option v-for="item in problemTypeList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="反馈人：">
            <Input v-model="dataToQuery.feedbackUser" placeholder="请填写反馈人"/>
          </FormItem>
        </i-col>
        <i-col span="8">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开<Icon type="ios-arrow-down"/></Button>
          <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
          <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
        </i-col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <i-col span="8">
          <FormItem label="问题类型：">
            <Select class="query-form-el" placeholder="请选择问题类型" type='text' v-model='dataToQuery.problemType'>
              <Option v-for="item in problemTypeList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="反馈人：">
            <Input v-model="dataToQuery.feedbackUser" placeholder="请填写反馈人"/>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="反馈人编号：">
            <Input v-model="dataToQuery.problemNo" placeholder="请填写反馈人编号"/>
          </FormItem>
        </i-col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <i-col span="8">
          <FormItem label="问题状态：">
            <Select class="query-form-el" placeholder="请选择问题状态" type='text' v-model='dataToQuery.problemStatus'>
              <Option v-for="item in problemStatusList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="反馈时间：">
            <DatePicker type="daterange" split-panels v-model='dataToQuery.createDateArr' placement="bottom-end" placeholder="请选择反馈时间" style="width: 100%" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起<Icon type="ios-arrow-up" /></Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </i-col>
      </Row>
    </Form>
    <Row class="query-form">
      <i-col span="24">
        <Button size="large" class="ivu-btn-add" icon="md-add"  @click="addInfo">我要反馈</Button>
      </i-col>
    </Row>
    <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" :loading='pageStatus.loading'
           border :columns="columns1"  :data="dataTable" >
    </Table>
    <Row style="margin-right:10px;">
      <i-col span="24" >
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
      </i-col>
    </Row>
    <Modal  title="在线问题反馈" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800  class-name='limit-height-dialog'>
      <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?170:null" :label-position="mode === 'view'?'right':'top'">
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="12">
            <FormItem label='问题类型：' prop='problemType'>
              <div v-if="mode === 'view'">{{ problemTypeList[dataToView.problemType]['codingName']  }}</div>
              <Select class="query-form-el" placeholder="请选择事件类型" type='text' v-model='dataToView.problemType' :disabled="mode != 'add'" v-else >
                <Option v-for="item in problemTypeList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="12">
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem label='问题描述：' prop='problemDescription'>
              <div v-if="mode === 'view'">{{  dataToView.problemDescription }}</div>
              <Input v-else class='' type='textarea' v-model='dataToView.problemDescription' :rows="4" :disabled="mode != 'add'"/>
            </FormItem>
          </i-col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem label='附件上传:'>
              <div v-if="mode === 'view' || mode === 'edit'">
                <div class="demo-upload-list" v-for="item in uploadList">
                  <template>
                    <img :src="item.picture">
                    <div class="demo-upload-list-cover">
                      <Icon type="ios-eye-outline" @click.native="handleView(item.id)"></Icon>
                    </div>
                  </template>
                </div>
              </div>
              <div v-else>
                <Upload ref="upload"
                        :before-upload="beforeUpload1"
                        :show-upload-list="true"
                        :max-size="10240"
                        :format="['jpg','jpeg','png']"
                        multiple
                        type="drag"
                        :action="fileUrl">
                  <div style="padding: 10px">
                    <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                    <p>点击将文件拖拽到这里上传</p>
                    <span style="font-size:8px;color: #797a64">支持扩展名：.jpg .jpeg .png</span>
                  </div>
                </Upload>
                <div v-show="uploadList.length>0" v-for="item in uploadList" :key='item'>
                  <a @click="downloadFile1(dataToView.id,item)">{{ item.fileName }}</a>
                  <Button type="text" icon="md-trash" @click="remove1(item.id)"
                          style="margin-left: 5px;margin-bottom: 3px"/>
                </div>
              </div>
            </FormItem>
          </i-col>
        </Row>
        <Row v-if="mode == 'view'" type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="12">
            <FormItem label='解决时间：'>
              <div>{{ dataToView.updateDate && formatDate2(new Date(dataToView.updateDate), 'yyyy-MM-dd hh:mm:ss')  }}</div>
            </FormItem>
          </i-col>
          <i-col span="12">
          </i-col>
        </Row>
        <Row v-if="mode == 'edit' || mode == 'view'" type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="12">
            <FormItem label='问题状态：' prop='problemStatus' v-if="currentUser.loginId === Common.admin || currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined">
              <div v-if="mode === 'view'">{{  this.problemStatusList[dataToView.problemStatus]['codingName'] }}</div>
              <Select class="query-form-el" placeholder="请选择问题状态" type='text' v-model='dataToView.problemStatus' v-else>
                <Option v-for="item in problemStatusList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="12">
          </i-col>
        </Row>
        <Row v-if="mode == 'edit' || mode == 'view'" type="flex" justify="space-around" class="code-row-bg" :gutter="16">
          <i-col span="24">
            <FormItem label='解决方案' prop="solution">
              <div v-if="mode === 'view'">{{  dataToView.solution }}</div>
              <Input v-else class='' type='textarea' v-model='dataToView.solution' :rows="4"/>
            </FormItem>
          </i-col>
        </Row>
      </Form>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
        <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {Api} from '@/api/index.js'
import {formatDate} from '@/tools/index'
var cascaderDom = () => import('@/components/cascader-dom.vue');
import pageCommonFunction from '@/components/pageCommonFunction.js'

export default {
  name: "problemFeedbackList",
  data() {
    return {
      ...this.createCommonDataField(),
      columns1: [
        { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        { key:'problemType',title: '问题类型',  align: 'center', minWidth:150,
          render: (h, params) => {
            return h('span', params.row.problemType !== null ? this.problemTypeList[params.row.problemType]['codingName']: '')
          }
        },
        { key:'createDate',title: '反馈时间',  align: 'center' , render: (h, params)=>{return h('span', params.row.createDate && formatDate(new Date(params.row.createDate),'yyyy-MM-dd hh:mm:ss') )}, minWidth:160},
        { key:'feedbackUser',title: '反馈人',  align: 'center', render: (h, params)=>{return h('span', params.row.feedbackUser)}, minWidth:160 },
        { key:'problemNo',title: '反馈人编号',  align: 'center', render: (h, params)=>{return h('span', params.row.problemNo)}, minWidth:160 },
        { key:'problemStatus',title: '问题状态',  align: 'center', width: 140, render: (h, params) => {
            let title = params.row.problemStatus !== null ? this.problemStatusList[params.row.problemStatus]['codingName']: '';
            let color = 'primary'
            if(title === '未受理'){
              color = 'error';
            }else if(title === '暂缓解决'){
              color = 'warning';
            }else if(title === 'pw-00002000000003'){
              color = '已解决';
            }
            return h('Div', [
              h('Tag', {
                props: {
                  color: color,
                  type: 'border'
                }
              }, title)
            ])
          }},
        { key:'ifShow',title: '审批状态',  align: 'center', minWidth:150,
          render: (h, params) => {
            return h('span', params.row.ifShow == 0 ? '未审批': '已审批')
          }
        },
        { key:'problemDescription',title: '问题描述',  align: 'center', width: 200 , tooltip: true},
        this.getActionColumns2(),
      ],
      tableHeight:10,
      ruleCustom: {
        problemType: [ { required: true, message: ' ', trigger: 'change' } ],
        problemStatus: [ { required: true, message: ' ', trigger: 'change' } ],
        problemDescription: [ { required: true, message: ' ', trigger: 'change' } ],
        solution: [ { required: true, message: ' ', trigger: 'change' } ]
      },
      queryUrl:Api.queryProblemFeedback,
      exportUrl:Api.exportProblemFeedback,
      deleteUrl:Api.deleteProblemFeedback,
      getUrl:Api.getProblemFeedback,
      updateUrl:Api.updateProblemFeedback,
      saveUrl:Api.saveProblemFeedback,
      problemTypeList: [],
      problemStatusList: [],
      fileUrl: Api.interestedPartiesUserFile,
      uploadList:[],
    };
  },
  async mounted() {
    await this.$http.get(Api.queryCodeDetailBySortId + '/pw-00001', {params: {}}).then((res) => {
      this.problemTypeList = this.dictListToMap(res.data.data);
    });
    await this.$http.get(Api.queryCodeDetailBySortId + '/pw-00002', {params: {}}).then((res) => {
      this.problemStatusList = this.dictListToMap(res.data.data);
    });
    this.setTableHeight();
    this.query();
  },
  methods: {
    ...pageCommonFunction,
    query() {
      if(this.dataToQuery.createDateArr != undefined && this.dataToQuery.createDateArr.length!=0){
        if(this.dataToQuery.createDateArr[0] != '') this.dataToQuery.startDate = this.dataToQuery.createDateArr[0];
        if(this.dataToQuery.createDateArr[1] != '') this.dataToQuery.endDate = this.dataToQuery.createDateArr[1];
      }
      if(this.currentUser.loginId === this.Common.admin || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined){
        this.dataToQuery.ifShow = 1;
      }else{
        this.dataToQuery.ifShow = 0;
      }
      this.queryAjax();
    },
    switchQuery(flag) {
      this.switchFlag = flag;
      if (!this.switchFlag) {
        this.tableHeight = this.tableHeight + 44;
      } else {
        this.tableHeight = this.tableHeight - 44;
      }
    },
    submit(name) {
      if(this.mode != 'edit'){
        this.dataToView.problemNo = this.currentUser.loginId;
        if(this.problemStatusList.length != 0) this.dataToView.problemStatus = this.problemStatusList['pw-00002000000001']['codingCodeId'];
        this.dataToView.feedbackUser = this.currentUser.userName;
        this.dataToView.createUserId = this.currentUser.userId;
      }else{
        this.dataToView.updateUserId = this.currentUser.userId;
      }
      this.submitAjax(name);
    },
    deleteData(params) {
      this.$set(params.row, 'id', params.row.id);
      this.deleteDateAjax(params);
    },
    examineData(params){
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确认审批此行数据？</p>',
        onOk: () => {
          let data = {...params.row};
          data.ifShow = params.row.ifShow == 0? 1:0;
          this.$http.put(Api.updateProblemFeedback, data).then((res) => {
            this.$Message.success({ content: '更新成功', duration: 4 });
            this.queryAjax();
          }).catch(e => {
            this.$Message.error({ content: '更新失败', duration: 4 });
          })
        },
        onCancel: () => {
        }
      });
    },
    getActionColumns2(noRender){
      return {
        title: '操作',
        key: 'action',
        fixed: 'right',
        width: 200,
        align: 'center',
        render: (h, params) => {
          if (noRender instanceof Function && noRender(params)) {
            return;
          }
          if (this.currentUser.loginId === this.Common.admin || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined) {
            return h('div', [
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px',},
                on: {
                  click: () => {
                    this.viewData(params);
                    this.getFiles1();
                  }
                }
              }, '详情'),
              // h('Divider', {props: {type: 'vertical'}}, ''),
              // h('A', {
              //     props: {type: 'primary', size: 'small'},
              //     disabled: true,
              //     style: {fontSize: '14px'},
              //     on: {
              //         click: () => {
              //             this.editData(params);
              //             this.getFiles1();
              //         }
              //     }
              // }, '修改'),
              // h('Divider', {props: {type: 'vertical'}}, ''),
              // h('A', {
              //   props: {type: 'primary', size: 'small'},
              //   disabled: true,
              //   style: {fontSize: '14px'},
              //   on: {
              //     click: () => {
              //       this.$router.push({name: 'problemFeedbackDetial'});
              //       // this.examineData(params);
              //     }
              //   }
              // }, '审核'),
              h('Divider', {props: {type: 'vertical'}}, ''),
              h('A', {
                props: {type: 'primary', size: 'small'},
                disabled: true,
                style: {fontSize: '14px'},
                on: {
                  click: () => {
                    this.editData(params);
                    this.getFiles1();
                  }
                }
              }, '处理'),
              h('Divider', {props: {type: 'vertical'}}, ''),
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px', color: 'red'},
                on: {
                  click: () => {
                    this.deleteData(params);
                  }
                }
              }, '删除')
            ]);
          } else if(this.currentUser.userId === params.row.createUserId ){
            return h('div', [
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px',},
                on: {
                  click: () => {
                    this.viewData(params);
                    this.getFiles1();
                  }
                }
              }, '详情'),
              // h('Divider', {props: {type: 'vertical'}}, ''),
              // h('A', {
              //     props: {type: 'primary', size: 'small'},
              //     disabled: true,
              //     style: {fontSize: '14px'},
              //     on: {
              //         click: () => {
              //             this.editData(params);
              //             this.getFiles1();
              //         }
              //     }
              // }, '修改'),
              h('Divider', {props: {type: 'vertical'}}, ''),
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px', color: 'red'},
                on: {
                  click: () => {
                    this.deleteData(params);
                  }
                }
              }, '删除')
            ]);
          } else {
            return h('div', [
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px',},
                on: {
                  click: () => {
                    this.viewData(params);
                  }
                }
              }, '详情'),
              h('Divider', {props: {type: 'vertical'}}, ''),
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px', color: '#c5c8ce'}
              }, '修改'),
              h('Divider', {props: {type: 'vertical'}}, ''),
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '14px', color: '#c5c8ce'}
              }, '删除')
            ]);
          }
        }
      }
    },
    beforeUpload1(file) {
      if(file.type.indexOf("image") == -1){
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '附件' + file.name + '格式不正确, 请上传jpg或png.'
        });
        return;
      }
      let formData = new FormData();
      formData.append("files", file); // 文件对象
      let url = this.fileUrl + '/' + this.dataToView.id + '/files/picture'
      this.$http.post(url, formData).then((res) => {
        if (res.data.result == "success") {
          this.$Message.info("文件上传成功")
          this.getFiles1();
        }
      })
      return false
    },
    getFiles1() {
      let url = this.fileUrl + '/' + this.dataToView.id + '/files/picture'
      this.$http.get(url).then((res) => {
        if (res.data.result == "success") {
          console.log(res.data)
          this.uploadList = res.data.data
        }
      })
    },
    remove1(id) {
      let url = this.fileUrl + '/file/' + id;
      this.$http.delete(url).then((res) => {
        this.getFiles1()
      })
    },
    downloadFile1(guideId, file) {
      let url = this.fileUrl + '/file/' + file.id;
      this.$http.get(url, {
        responseType: 'blob'      //告诉服务器我们需要的响应格式
      }).then((res) => {
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = file.fileName //标题
        aLink.click()
        document.body.appendChild(aLink)
      })
    },
    handleFormatError(file){
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '附件' + file.name + '格式不正确, 请上传jpg或png.'
      });
    },
    get_uuid() {
      let s = [];
      let hexDigits = "0123456789abcdef";
      for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23] = "-";

      let uuid = s.join("");
      let reg = new RegExp("-", "g");
      let a = uuid.replace(reg, "");
      return a;
    },
    formatDate2(date, fmt) {
      if (typeof date == 'string') {
        return date;
      }
      if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
      if (!date || date == null) return null;
      let o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
      return fmt
    },
  }
}
</script>

<style scoped>
.demo-upload-list{
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
  margin-right: 4px;
}
.demo-upload-list img{
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
  display: block;
}
.demo-upload-list-cover i{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
